<template>
  <div class="tabbar">
      <div @click="onSelect(index)" class="tabbar-item" v-for="(item, index) in array" :key="item.name">
          <svg-icon :color="iconColor(item)" :name="item.icon" class="icon" />
          <div :style="{ color: iconColor(item)}" class="name">{{ item.name }}</div>
      </div>
  </div>
</template>

<script>
import SvgIcon from './SvgIcon.vue'
export default {
    name: 'tabbar',
    data() {
        return {
            color: 'rgb(75, 185, 79)',
            array: [],
        }
    },
    components: {
        SvgIcon,
    },
    props: {
        tabbar: {
            type: Array,
            required: true,
        }
    },
    methods: {
        iconColor(item) {
            if (item.active) {
                return this.color;
            }
            return '';
        },
        onSelect(index) {
            this.array.forEach(item => {
                item.active = false;
            })
            this.array[index].active = true;
            this.$emit('select', index);
        }
    },
    created() {
        this.tabbar.forEach(i => {
            this.array.push({
                active: false,
                ...i
            })
        })
        this.array[0].active = true;
    }
    
}
</script>

<style scoped>
.tabbar {
    display: flex;
    height: 64px;
    width: 100%;
    flex-shrink: 0;
    background-color: rgb(244, 245, 246);
}
.tabbar > .tabbar-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tabbar > .tabbar-item > .name {
    font-size: 14px;
}
.tabbar > .tabbar-item > .icon {
    height: 20px;
    width: 20px;
    margin-bottom: 3px;
}
</style>